<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="dataSource.title"
      wrapClassName="work-modal-container"
      @cancel="closeModal()"
    >
      <div class="modal-body-container" v-loading="loading">
        <a-row :gutter="0">
          <a-form-model
            ref="form"
            :model="form"
            :rules="rules"
            :hideRequiredMark="dataSource.hideDisable"
          >
            <a-col :span="24">
              <a-form-model-item label="波纹管用量" prop="bwgDosage">
                <a-input
                  v-model.trim="form.bwgDosage"
                  :placeholder="
                    dataSource.hideDisable ? '' : '请输入波纹管用量'
                  "
                  :disabled="dataSource.hideDisable"
                  :maxLength="250"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="钢绞线实际用量" prop="gjxDosage">
                <a-input
                  v-model.trim="form.gjxDosage"
                  :placeholder="
                    dataSource.hideDisable ? '' : '请输入钢绞线实际用量'
                  "
                  :disabled="dataSource.hideDisable"
                  :maxLength="250"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="压浆量" prop="yjDosage">
                <a-input
                  v-model.trim="form.yjDosage"
                  :placeholder="dataSource.hideDisable ? '' : '请输入压浆量'"
                  :disabled="dataSource.hideDisable"
                  :maxLength="250"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="评价">
                <a-select
                  showSearch
                  allowClear
                  v-model="form.evaluate"
                  style="100%"
                  :placeholder="dataSource.hideDisable ? '' : '请选择评价'"
                  :disabled="dataSource.hideDisable"
                >
                  <a-select-option value="合格"> 合格 </a-select-option>
                  <a-select-option value="良好"> 良好 </a-select-option>
                  <a-select-option value="优良"> 优良 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注">
                <a-input
                  v-model.trim="form.remark"
                  :placeholder="dataSource.hideDisable ? '' : '请输入备注'"
                  :disabled="dataSource.hideDisable"
                  :maxLength="250"
                  :rows="4"
                  type="textarea"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="modal-footer-container">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button
          type="primary"
          @click="save()"
          :loading="buttonLoading"
          v-if="!dataSource.hideDisable"
        >
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
import { getLedgerDetail, editLedger } from "@/api/wisdom-beam/ledger.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //波纹管用量
        bwgDosage: "",
        //钢绞线实际用量
        gjxDosage: "",
        //压浆量
        yjDosage: "",
        //备注
        remark: "",
        //评价
        evaluate: undefined,
      },
      rules: {
        bwgDosage: [
          {
            trigger: "blur",
            required: true,
            message: "请输入波纹管用量",
          },
        ],
        gjxDosage: [
          {
            trigger: "change",
            required: true,
            message: "请输入钢绞线实际用量",
          },
        ],
        yjDosage: [
          {
            trigger: "blur",
            required: true,
            message: "请输入压浆量",
          },
        ],
      },
      buttonLoading: false,
    };
  },
  methods: {
    getDetail() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { id } = this.dataSource;
        getLedgerDetail({ id })
          .then((res) => {
            let { data } = res;
            this.form = {
              //波纹管用量
              bwgDosage: data.result?.bwgDosage ?? "",
              //钢绞线实际用量
              gjxDosage: data.result?.gjxDosage ?? "",
              //压浆量
              yjDosage: data.result?.yjDosage ?? "",
              //备注
              remark: data.result?.remark ?? "",
              //评价
              evaluate: data.result?.evaluate ?? undefined,
              //主键id
              id: data.result.id ?? "",
            };
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.buttonLoading = true;
          let { form } = this;
          editLedger(form)
            .then((res) => {
              this.closeModal();
              notificationTip("success", this.dataSource.title + "成功！");
              this.$parent.getTableData();
            })
            .catch((_) => {
              notificationTip("error", this.dataSource.title + "失败！");
            })
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },

    //关闭弹框
    closeModal() {
      //重置表单
      this.$refs.form.resetFields();
      this.form = {
        //波纹管用量
        bwgDosage: "",
        //钢绞线实际用量
        gjxDosage: "",
        //压浆量
        yjDosage: "",
        //备注
        remark: "",
        //评价
        evaluate: undefined,
      };
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.work-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .modal-body-container {
    padding: 20px 20px 0 20px;
    padding-right: 60px;
    max-height: 700px;
    .custom-scrollbar();
    //表单
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 130px;
        white-space: pre-wrap;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 36px;
        line-height: 20px;
        label {
          color: #999999;
        }
      }
      .check-item-select {
        height: 86px;
        .ant-select-selection__rendered {
          height: 86px;
          .ant-select-selection__placeholder {
            margin-top: -40px !important;
          }
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
  .modal-footer-container {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
